<template>
  <el-row type="flex" justify="center">
    <el-col :span="12">
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="许可名称:" prop="meunName">
          <el-input v-model="form.meunName" placeholder="许可名称"></el-input>
        </el-form-item>
        <el-form-item label="许可类型:" prop="meunType">
          <el-radio-group v-model="form.meunType">
            <el-radio :label="'1'">顶部菜单</el-radio>
            <el-radio :label="'2'">左侧菜单</el-radio>
            <el-radio :label="'3'">按钮</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="许可等级:" prop="level">
          <el-radio-group v-model="form.level">
            <el-radio :label="'0'">通用许可</el-radio>
            <el-radio :label="'1'">授权许可</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="父级许可:">
          <vxe-table
                  ref="xTree1"
                  show-overflow
                  row-id="id"
                  row-key
                  :row-config="{isHover: true}"
                  :show-header="false"
                  :data="tableData"
                  height="200px"
                  :radio-config="{labelField: 'meunName',checkRowKey: form.parentId}"
                  :tree-config="{transform: true, accordion: true, line: true, iconOpen: 'fa fa-caret-down', iconClose: 'fa fa-caret-right'}">
            <vxe-column type="radio" tree-node></vxe-column>
          </vxe-table>
        </el-form-item>
        <el-form-item label="应用权限:">
          <vxe-table
                  ref="xTree2"
                  show-overflow
                  row-id="id"
                  row-key
                  :row-config="{isHover: true}"
                  :show-header="false"
                  :data="purviews"
                  height="200px"
                  :checkbox-config="{labelField: 'purviewName',checkRowKeys: form.purview}"
                  :tree-config="{transform: true, accordion: true, line: true, iconOpen: 'fa fa-caret-down', iconClose: 'fa fa-caret-right'}">
            <vxe-column type="checkbox" tree-node></vxe-column>
          </vxe-table>
        </el-form-item>

        <el-form-item style="text-align: center">
          <el-button type="primary" @click="onSubmit">提交</el-button>
          <el-button type="danger" @click="cancel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
</template>

<script>
  import {meunPublic, meunList, purviewList, queryMeunByMid, editMeun} from "@/api/operations-center/meun";

  export default {
    name: "PowerEdit",
    mixins: [meunPublic],
    data() {
      return {
        form: {
          id: ''
        },
        tableData: [],
        purviews: []
      }
    },
    methods: {
      /**
       * {获取菜单列表}
       *
       * @author: 宋康
       * @date: 2022/8/18 09:46
       */
      queryMeunList() {
        meunList('', false, [this.form.id]).then(res => {
          if (res.status) {
            this.tableData = res.data;
          }
        })
      },
      /**
       * {获取权限列表}
       *
       * @author: 宋康
       * @date: 2022/8/18 10:21
       */
      queryPurviewList() {
        purviewList().then(res => {
          if (res.status) {
            this.purviews = res.data;
          }
        })
      },
      /**
       * {获取指定许可}
       *
       * @author: 宋康
       * @date: 2022/8/18 15:02
       */
      queryMeun() {
        queryMeunByMid(this.form.id).then(res => {
          if (res.status && res.data) {
            this.form = {
              ...res.data
            }
            //
            this.queryMeunList();
            this.queryPurviewList();
          }
        })
      },
      /**
       * {编辑}
       *
       * @author: 宋康
       * @date: 2022/8/18 16:24
       */
      onSubmit() {
        let parent = this.$refs['xTree1'].getRadioRecord();
        if (parent) {
          this.form.parentId = parent.id;
        } else {
          this.form.parentId = '0';
        }
        // 全选
        let purview = this.$refs['xTree2'].getCheckboxRecords();
        if (purview.length > 0) {
          let purviews = [];
          for (let p of purview) {
            purviews.push(p.id);
          }
          // 半选
          let Indeterminate = this.$refs['xTree2'].getCheckboxIndeterminateRecords();
          if (Indeterminate.length > 0) {
            for (let p of Indeterminate) {
              purviews.push(p.id);
            }
          }
          this.form.purview = purviews;
        } else {
          this.form.purview = [];
        }
        //
        this.$refs['form'].validate((valid) => {
          if (valid) {
            editMeun(this.form).then(res => {
              if (res.status) {
                this.$XModal.alert({
                  content: '编辑成功',
                  status: 'success',
                }).then(() => {
                  this.cancel();
                })
              } else {
                this.$XModal.alert({
                  content: res['msg'],
                  status: 'error',
                })
              }
            })
          } else {
            return false;
          }
        });
      },
    },
    mounted() {
      this.form.id = this.$route.query.id || '0';
      this.queryMeun();
    }
  }
</script>

<style lang="scss" scoped>
</style>
